<template>
  <div class="container">
    <div style="margin-top: 300px;margin-left: 220px;">
      <p style="font-size: 60px"> hello!</p>
      <p style="margin-top: 15px"> 欢迎登陆
        <span style="color: #0033cc;font-size: 25px">旧书回收管理系统</span>
      </p>
      <div v-if="show">
      <LoginForm />
      <div style="margin-left: 200px;color: #0033cc;" @click="show=!show"> 忘记密码？</div> 
      </div>
      <div v-else>
      <ForgetForm />
      <div style="margin-left: 200px"> 记住密码  
        <span style="margin-left: 10px;color: #0033cc;" @click="show=!show">去登陆</span>
      </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import LoginForm from "@/components/login/LoginView.vue";

import ForgetForm from "@/components/login/ForgetView.vue";
const show = ref(true);
</script>

<style scoped>
.container {
 margin: 0;
  padding: 0;
  border: 0;
  position: fixed;
  width: 100%;
  height: 100%;
  background-image: url('../../assets/login1.jpg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
</style>